<!--
 * @Description: 第二章-命名路由-编程式导航
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-27 01:24:43
-->
<template>

    <div>
        <h1>第二章-命名路由-编程式导航</h1>
        <hr />
        <div>
            <h2>命名路由</h2>
            <router-link :to="{ name: 'login' }">login</router-link>
            <router-link :to="{ name: 'reg' }" style="margin-left: 10px;">reg</router-link>
        </div>
        <hr />
        <div>
            <h2>a 标签 会刷新页面</h2>
            <a href="/">login</a>
            <a href="/reg" style="margin-left: 10px;">reg</a>
        </div>
        <div>
            <h2>编程式导航</h2>
            <button @click="toPage1('./')">login route push url</button>
            <button @click="toPage1('./reg')">reg route push url</button>
            <button @click="toPage2('login')">login route push name</button>
            <button @click="toPage2('reg')">reg route push name</button>
        </div>
    </div>

</template>
<script setup lang="ts">
// 第一章入门
import { useRouter } from 'vue-router'

const router = useRouter()

// 第二章-命名路由-编程式导航
const toPage1 = (url: string) => {
    // 字符串跳转方式
    // router.push(url)
    // 对象跳转方式
    router.push({
        path: url
    })
}

const toPage2 = (name: string) => {
    // 命名式跳转方式
    router.push({
        name: name
    })
}

</script>
<style scoped></style>